<template>
  <el-dialog :title="$tt('label_pms_time_period_cfg')" :visible.sync="visible">
    <el-form :rules="rules" :model="form" ref="form">

      <!-- 步长体积 CBM': '步长重量 Kg -->
      <!-- <el-form-item :label="$tt('label_pms_stop_weight')">
          <el-input v-model="weightForm.step" style="width: 100px;"></el-input>
        </el-form-item> -->

      <!-- 生成 -->
      <!-- <el-button >{{ $tt('label_pms_gernate') }}</el-button> -->

      <!-- 体积段配置   重量段配置 -->
      <el-form-item :label="$tt('label_pms_time_period_cfg')" prop="cfg_list">
        <div style="display: flex; display: flex; flex-direction: row; flex-wrap: wrap;">
          <div v-for="item, index in form.cfg_list" style="padding: 0px 6px 0px 6px; position: relative"
            @mouseover="$set(item, 'showRemove', true)" @mouseleave="$set(item, 'showRemove', false)">
            <input type="text" v-model="item.startHour" :disabled="index == 0 || index == form.cfg_list.length - 1"
              :style="index == 0 || index == form.cfg_list.length - 1 ? '' : 'border: none;'"
              class="input_time_interval" />
            <i v-if="index > 0 && index < form.cfg_list.length - 1" v-show="item.showRemove"
              @click="form.cfg_list.splice(index, 1)" class="el-icon-remove"
              style="position: absolute; top: 0px; right: 0px; cursor: pointer; color: #d74343; "></i>
          </div>
          <el-button icon="el-icon-plus" @click="pushNewTime" size="mini">

          </el-button>
        </div>

      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style="display: flex; justify-content: space-between; ">
      <div>
        <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $tt('label_save') }}</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import moment from 'moment-mini-ts'

export default {
  route_manual: true,
  components: {},
  data() {
    return {
      visible: false,
      form: {
        cfg_list: [],
      },
      rules: {
        cfg_list: {
          required: true, type: "array", validator: (r, v, cb) => {
            if (_.isEmpty(v)) {
              return cb(this.$tt('tip_can_no_empty'))
            } else if (_.uniqBy(v, it => String(it.startHour).trim()).length != v.length) {
              return cb(this.$tt('时间段不能重复'))
            } else if (v.some(it => !this.$reg.PureNumber(String(it.startHour)))) {
              return cb(this.$tt('时间段只能为正整数'))
            } else if (v.some(it => Number(it.startHour) > 24)) {
              return cb(this.$tt('时间段不能大于24'))
            } else if (v.some((it, i) => i > 0 && Number(it.startHour) <= Number(v[i - 1].startHour))) {
              return cb(this.$tt('时间段必须从小到大'))
            }
            cb()
          }, trigger: 'blur'
        }
      },
    }
  },
  props: {
    typeCode: {
      type: String,
      default: "",
    },
  },
  methods: {
    show() {
      this.visible = true
      // this.form.cfg_list = [{ startHour: 0, }, { startHour: 1, }, { startHour: 6, }, { startHour: 24, }]
      this.$ajax({
        url: '/wms-api/outbound/OutboundOverseasOrderRpc/getReportTime.json',
        type: 'form',
        loading: true,
        data: {
          reportType: this.typeCode,
        },
        success: (res) => {
          if (res && res.data && res.data.rows) {
            if (res.data.rows[res.data.rows.length - 1].startHour != 24) {
              res.data.rows.push({ startHour: 24, })
            }
            this.form.cfg_list = res.data.rows
          }

        }
      });
    },
    pushNewTime() {
      if(this.form.cfg_list.length==0){
        this.form.cfg_list.push({ startHour: 0, })

      }else{
        this.form.cfg_list.push({ startHour: 24, })

      }
    },
    confirm() {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {

          const list = []
          for (let i = 0; i < this.form.cfg_list.length; i++) {
            if (this.form.cfg_list[i].startHour >= 24) continue
            list.push({
              startHour: this.form.cfg_list[i].startHour,
              endHour: (i + 1) >= this.form.cfg_list.length ? 24 : this.form.cfg_list[i + 1].startHour
            })
          }
          this.$ajax({
            url: '/wms-api/outbound/OutboundOverseasOrderRpc/saveReportTime.json',
            type: 'json',
            data: {
              reportType: this.typeCode,
              orderStatTimeList: list,
            },
            success: (res) => {
              this.$message({
                message: this.$tt('tip_submit_success'),
                type: 'success'
              })
              this.visible = false
              this.$emit("success")
            }
          });
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });


    },

  }

}
</script>

<style scoped>
.input_time_interval {
  width: 40px;
  font-size: 14px;
  text-align: center;
}
</style>
